<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue切换图片</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<!-- 这个Vue视图容器 -->
		<div id="app">
			<button @click="img = 'img/cat.jpg'">显示猫</button> <!-- Vue指令-->
			<button @click="showDog">显示狗</button>
			<br />
			<img :src="img"/> <!-- vue指令-->
		</div>
		<script>
			// 解构赋值，解2个函数出来
			const { createApp, ref } = Vue
			// 创建Vue实例
			const app = createApp({
				setup() {
					// 定义数据
					const img = ref('img/cat.jpg')
					// 定义方法
					const showDog = () => { img.value = 'img/dog.jpg' }
					return { img, showDog }
				}
			})
			// 将Vue实例挂载到页面容器中
			app.mount('#app') // id选择器，选中<div id='app'>
		</script>
	</body>
</html>